<%@ page contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<%@ include file="/WEB-INF/jsp/commons/taglibs.jsp" %>
<!DOCTYPE HTML>
<html ng-app>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <META HTTP-EQUIV="pragma" CONTENT="no-cache">
    <META HTTP-EQUIV="Cache-Control" CONTENT="no-cache, must-revalidate">
    <META HTTP-EQUIV="expires" CONTENT="Wed, 26 Feb 1997 08:21:57 GMT">
    <title>${title}</title>
    <%@ include file="/WEB-INF/jsp/commons/meta.jsp" %>
    <link href="${ctx}/resources/new/style.css" type="text/css" rel="stylesheet"/>

</head>
<body>
<!-- 分页显示演示开始 -->
<style>
    <!--
    .tab {
        margin-bottom: 0px;
        margin-top: 6px;
    }

    .tab > li > a {
        line-height: 22px;
        padding-bottom: 2px;
        padding-top: 2px;
    }

    .tab-content {
        border: 1px solid #E3E3E3;
        border-radius: 0px 0px 4px 4px;
        border-top: none;
        padding: 2px;
    }

    .table [valign="top"] {
        vertical-align: top;
    }

    #single div[id^=m] {
        background-color: #FFFFFF;
        border: 1px solid #E3E3E3;
        border-radius: 4px;
        margin: 2px;
        padding: 2px;
        line-height: 25px;
        float: left;
        width: 45%;
        min-height: 225px;
    }

    #mNoGoods {
        max-height: 225px;
        display: block;
        overflow-y: auto;
    }

    #single div[id^=m] span {
        float: left;
    }

    .title {
        width: 60px;
        margin-left: 20px;
    }

    #memo {
        width: 99%;
    }

    tr td:FIRST-CHILD {
        text-align: right;
    }

    #goodsQr {
        min-height: 40px;
        width: 80%;
    }

    #qrCodeList {
        background-color: #FFFFFF;
        border: 1px solid #E3E3E3;
        border-radius: 4px;
        min-height: 400px;
        margin: 2px;
        padding: 15px;
        max-height: 600px;
    }

    div[name=box] {
        border: 1px solid;
        color: blue;
        padding: 15px;
        border-radius: 4px 4px 4px 4px;
    }

    input[readonly] {
        cursor: auto;
    }

    -->
</style>
<ul class="nav nav-tabs tab tBlock">
    <li class="active">
        <a deny="not" class="nFocus" href="#step" data-toggle="tab">
            <i class="icon-tags"></i>
            商品入库单
        </a>
    </li>
</ul>
<div class="tab-content">
    <div class="tab-pane active" id="step">
        <form id="inputForm" class="form-inline" action="${ctx}/adoms/storageBatch/save" method="post">
            <table id="step1" style="width: 80%; margin: auto;"
                   class="table table-striped table-bordered table-condensed">
                <tr>
                    <td class="span2">入库单编号:</td>
                    <td>
                        <input readonly="readonly" type="text" id="batchCode" name="batchCode">
                    </td>
                </tr>
                <tr>
                    <td class="span2">请选择商品:</td>
                    <td>
                        <select id="marchandise" name="marchandise.id" style="width: auto;">
                            <c:forEach items="${mList }" var="m" varStatus="index">
                                <option value="${m.id }">${index.index + 1}.${m.name }</option>
                            </c:forEach>
                        </select>
                    </td>
                </tr>
                <tr>
                    <td class="span2" valign="top">商品详情:</td>
                    <td>
                        <c:forEach items="${mList }" var="m" varStatus="index">
                            <div class="hide" id="m${m.id }">
                                <table class="table-bordered" style="width: 100%; background-color: #FFFFFF;">
                                    <tr>
                                        <td class="span2">商品名称：</td>
                                        <td>${index.index + 1}. ${m.name }</td>
                                    </tr>
                                    <tr>
                                        <td>商品编号：</td>
                                        <td>${m.code }</td>
                                    </tr>
                                    <tr>
                                        <td>单价：</td>
                                        <td>
											<span class="tBlue">
												<span>${m.price }</span>
												元
											</span>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td>商品条码：</td>
                                        <td>${m.barCode }</td>
                                    </tr>
                                    <tr>
                                        <td>品牌：</td>
                                        <td>${m.brand.name }</td>
                                    </tr>
                                    <tr>
                                        <td>产地：</td>
                                        <td>${m.producePlace }</td>
                                    </tr>
                                    <tr>
                                        <td>保质期：</td>
                                        <td>${m.shelflife }月</td>
                                    </tr>
                                    <tr>
                                        <td>商品描述：</td>
                                        <td>${m.description }</td>
                                    </tr>
                                    <tr>
                                        <td>规格：</td>
                                        <td name="spcification">${m.spcification }</td>
                                    </tr>
                                    <tr>
                                        <td>包装：</td>
                                        <td id="mPackageing" to="#inputPackage">${m.packageing }</td>
                                    </tr>
                                    <tr>
                                        <td>每件数量：</td>
                                        <td>
                                                ${m.numOfBox } ${m.packageing }
                                            <input type="hidden" name="mNumOfBox" value="${m.numOfBox }"/>
                                        </td>
                                    </tr>
                                </table>
                            </div>
                        </c:forEach>
                    </td>
                </tr>
                <tr>
                    <td>所属部门:</td>
                    <td>
                        <select id="department" name="department.id">
                            <option value="${USER.department.id}">${USER.department.name}</option>
                        </select>
                    </td>
                </tr>
                <tr>
                    <td>生产日期:</td>
                    <td>
                        <input id="produceDate" readonly="readonly" style="background-color: #FFFFFF; cursor: auto;"
                               datepicker="datepicker" name="produceDate" type="text" size="30" maxlength="80"/>
                    </td>
                </tr>
                <tr>
                    <td>录入数量:</td>
                    <td>
                        <input unit="#unit" type="text" id="numOfMarchandise" name="numOfMarchandise" value="0">
                        <span id="inputPackage"></span>
                    </td>
                </tr>
                <tr>
                    <td>录入件数:</td>
                    <td>
                        <input style="background-color: gray;" id="numOfBox" unit="#unit" type="text" name="numOfBox"
                               value="0">
                        件
                    </td>
                </tr>
                <tr>
                    <td style="text-align: center;" colspan="2">
                        <input class="btn btn-primary span2" type="submit" value="提 交"/>
                    </td>
                </tr>
            </table>
        </form>
    </div>
</div>
<script>
    function init() {
        var d = new Date();
        var code = "B" + d.getTime();
        $("#batchCode").val(code);
    }
    $(function () {
        var mNumOfBox = 1;
        $("#inputForm").validate({
            rules: {
                "marchandise.id": "required",
                "department.id": "required",
                "produceDate": "required",
                "numOfBox": {
                    required: true,
                    number: true
                },
                "numOfMarchandise": {
                    required: true,
                    digits: true
                }
            }
        });
        $("#numOfMarchandise").focus(function () {
            $(this).css("background", "white")
            $("#numOfBox").css("background", "gray");
        }).keyup(function () {
            var nums = $(this).val();
            $("#numOfBox").val((nums / mNumOfBox).toFixed(2));
        });
        $("#numOfBox").focus(function () {
            $(this).css("background", "white")
            $("#numOfMarchandise").css("background", "gray")
        }).keyup(function () {
            var nums = $(this).val();
            $("#numOfMarchandise").val((nums * mNumOfBox).toFixed(0));
        });
        $("#marchandise").change(function () {
            $("div[id^=m]:not([id^=mG])").hide();
            var mid = $(this).val();
            $("#m" + mid).show();
            mNumOfBox = parseInt($("[name=mNumOfBox]", $("#m" + mid)).val());
            $("#inputPackage").html($("[to=#inputPackage]", $("#m" + mid)).html());
        }).change();
        $("#inputForm").submit(function () {
            if (parseInt($.trim($("#numOfMarchandise").val())) < 1) {
                msgAlert.show("录入数量不正确！");
                return false;
            }
        });
        init();
    });
</script>
</body>
</html>